<template>
    <div class="shoplist">
        <Tit :tit="tit"></Tit>
        <van-row class="progress">
            <van-col
                span="8"
                :class="item.class"
                v-for="item in list"
                :key="item.id"
                @click="change(item.id)"
            >
                {{ item.title }}
            </van-col>
        </van-row>

        <van-row class="goods" v-show="flag">
            <van-col span="6" v-for="item in list1" :key="item.id">
                <div class="box" :class='item.class' @click="change1(item.id)">
                    <div>{{item.num}}</div>
                    {{item.title}}
                </div>
            </van-col>
        </van-row>

        <div class="card" v-for="item in shoplist" :key="item.id">
            <div class="left">
                <div class="top">
                    <img src="../../assets/shopcartimg/1.jpg" alt="">
                </div>
                <div class="bottom">买家已付款</div>
            </div>
            <div class="right">
                <div> {{item.name}} </div>
                <div> {{item.dis1}} </div>
                <div> {{item.dis2}} </div>
                <div class="money">
                    {{item.price}}
                </div>
                <div class="data">购买时间 ： 2017/12/13</div>
                <div class="button">
                    <div>提醒发货</div>
                    <div>联系商家</div>
                </div>
            </div>
        </div>



        
    </div>
</template>

<script>
import { getUserlist } from '../../api/index'


import Tit from "../../components/tit.vue";
export default {
    data() {
        return {
            tit: "商城订单",
            list: [
                {
                    id: 1,
                    class: "red",
                    title: "进行中",
                },
                {
                    id: 2,
                    class: "",
                    title: "已完成",
                },
                {
                    id: 3,
                    class: "",
                    title: "已发货",
                },
            ],
            list1:[
                {
                    id: 1,
                    class: "redborder",
                    title: "待发货",
                    num:0 
                },
                {
                    id: 2,
                    class: "",
                    title: "待付款",
                    num:2
                },
                {
                    id: 3,
                    class: "",
                    title: "已关闭",
                    num:1
                },
                {
                    id: 4,
                    class: "",
                    title: "付款中",
                    num:1
                },
            ],
            shoplist:[],
            status:1,
            flag:true
        };
    },
    components: {
        Tit,
    },
    methods: {
        change(index) {
            this.list.map((item) => (item.class = ""));
            if (index == 1) {
                this.status=1
                this.flag=true
                this.init();
                return (this.list[0].class = "red");
            } 
            if (index == 2) {
                this.status=5
                this.flag=false
                this.init();
                return (this.list[1].class = "red");
            } 
            this.status=6
            this.flag=false
            this.init();
            this.list[2].class = "red";
        },
        change1(index) {
            this.list1.map((item) => (item.class = ""));
            if (index == 1) {
                this.status=1
                this.init();
                return (this.list1[0].class = "redborder");
            } 
            if (index == 2) {
                this.status=2
                this.init();
                return (this.list1[1].class = "redborder");
            } 
            if (index == 3) {
                this.status=3
                this.init();
                return (this.list1[2].class = "redborder");
            } 
            this.status=4
            this.init();
            this.list1[3].class = "redborder";
        },
        async init(){
            let obj = await getUserlist({userId:this.$store.state.userId,status:this.status})
            console.log(obj.data.data);
            this.shoplist = obj.data.data
        },
        goback(){
            this.$router.replace({name:'confirmOrder'})
        }
    },
    created(){
        this.init()
    }
};
</script>

<style scoped lang='less'>
.shoplist {
    background-color: #f1f1f1;
    min-height: 1334px;
}
.progress {
    font-size: 30px;
    text-align: center;
    height: 80px;
    line-height: 80px;
    background-color: white;
}
.red {
    color: #ff5555;
}
.redborder{
    border-bottom: 3px solid #ff5555;
}
.goods {
    font-size: 20px;
    margin-top: 20px;
    height: 80px;
    text-align: center;
    background-color: white;
    .box {
        box-sizing: border-box;
        height: 70px;
        margin-top: 10px;
        div{
           margin-bottom: 10px;
        }
    }
}
.card{
    width: 710px;
    height: 260px;
    margin: auto;
    box-sizing: border-box;
    padding: 20px;
    background-color: white;
    margin-top: 20px;
    border-radius: 10px;
    .left{
        float: left;
        .top{
            img{
                width: 220px;
                height: 175px;
            }
        }
        .bottom{
            font-size: 15px;
        }
    }
    .right{
        float: left;
        width: 430px;
        margin-left: 20px;
        font-size: 18px;
        .data{
            margin-top: 10px;
        }
        .button{
            width: 100%;
            div{
                margin-top: 10px;
                float: right;
                width: 106px;
                text-align: center;
                line-height: 28px;
                height: 28px;
                margin-left: 15px;
                font-size: 20px;
                border: 1px solid #000;
            }
        }
    }
}
.money{
    margin-top: 10px;
    color: red;
}
</style>